<template>
  <div class="import">
    <el-card>
      <h3>员工导入</h3>
      <el-alert
        title="每次导入仅添加1000名员工哦,姓名、手机、入职时间、聘用形式为必填项"
        type="warning"
        show-icon
      />
      <!-- 上传组件 -->
      <UploadExcel :on-success="handleSuccess" :before-upload="beforeUpload" />
    </el-card>
  </div>
</template>

<script>
// 导入  导入Excel组件
import UploadExcel from '@/components/UploadExcel'
// 导入枚举 获取excel表头中文转英文
import EMPLOYEECON from '@/api/constant/employees'

import { importEmployees } from '@/api/employees'

// 处理日期的格式，网上搜的
const formatDate = (numb, format) => {
  const time = new Date((numb - 1) * 24 * 3600000 + 1)
  time.setYear(time.getFullYear() - 70)
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() - 1 + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return (
    year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
  )
}
export default {
  name: 'Import',
  components: {
    UploadExcel
  },
  methods: {
    beforeUpload(file) {
      // 上传之前的逻辑
      // file 为当前选择的那个文件
      // console.log(file);// 得到文件对象
      const isLt1M = file.size / 1024 / 1024 < 1
      // 返回true或false表示是否继续执行下面的逻辑
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '传不了大于1M的文件哦',
        type: 'warning'
      })
      return false
    },
    async handleSuccess({ results, header }) {
      // 进到这里表示上传成功了
      // console.log('results', results) // 得到文件里的数据
      // console.log('header', header) // 得到表头

      const obj = results.map((v) => {
        // 保存数据
        const _obj = {}
        for (const key in v) {
          // 获取正确的key,服务器要的格式表头是英文，上传文件的表头是中文
          const currentKey = EMPLOYEECON.excelMap[key]
          // 获取正确的值
          let currentValue = v[key]
          // 特殊处理日期，得到的日期格式不是我们日常看到的那种
          if (currentKey === 'timeOfEntry' || currentKey === 'correctionTime') {
            currentValue = formatDate(currentValue, '/')
          }
          _obj[currentKey] = currentValue
        }
        return _obj
      })
      // console.log(obj)
      // 发请求导入员工
      const res = await importEmployees(obj)
      // console.log(res)
      this.$message, success('导入成功')
      this.$router.push('/employees')
    }
  }
}
</script>

<style lang="scss">
.import {
  h3 {
    text-align: center;
  }
}
</style>
